<template>
	<div class="wrapper index">
		<!-- 头部 -->
		<v-head :colorType="1"></v-head>
		<!-- 主题内容 -->
		<div class="content">
			<div class="faBu">
				<img src="@/assets/image/index/faBu.png" alt="post" @click="releaseKnowledge" />
			</div>
			<!-- 顶部搜索 -->
			<div class="souSuo cfff">
				<div class="bannerCss">
					<el-carousel>
						<el-carousel-item v-for="item in bannerList" :key="item">
							<img class="banner-img" :src="item" alt="banner" />
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="f30 fbold tCenter">主题知识库</div>
				<div class="center input-main">
					<div class="bfff input-box flex center">
						<img src="@/assets/image/index/souSuo.png" class="souSuo-icon" alt="" />
						<input
							type="text"
							class="flex"
							placeholder="请输入您想要搜索的内容"
							v-model="searchText"
							@keyup.enter.native="searchAllCompany"
						/>
						<router-link :to="`/search?tag=${searchText}&tags=03&active=1`" class="ctheme fbold pointer">
							立即搜索
						</router-link>
					</div>
					<!-- <div class="hr"></div> -->
					<div class="center shangChuan pointer" @click="shangChuan">
						<img src="@/assets/image/index/shangChuan.png" class="shangChuan-icon" alt="" />
						<div class="f16 c333 fbold">查重</div>
					</div>
				</div>
				<div class="reCi center flex-start">
					<img src="@/assets/image/index/huo.png" class="huo" alt="" />
					<div class="flex center flex-start nowrap f14 re-wrap">
						<span>热词：</span
						><span v-for="item in hotWords" :key="item.id" @click="onToSearch(item)">{{ item.name }}</span>
					</div>
				</div>
			</div>
			<!-- 分类和标签 -->
			<div class="fen-biao-box">
				<div class="c333 fbold tCenter f26 bg">信息库标签</div>
				<div class="label f14">
					<div class="label-box">
						<div class="label-box-left">
							<img src="@/assets/image/index/label_2.png" class="fenLei-icon" alt="" />
							<div class="label-title">知识分类</div>
						</div>
						<div class="label-box-right">
							<div class="label-content">
								<div class="label-span" v-for="(item, index) in knowledge" @click="onFL(item)">
									<!-- <el-tooltip class="box-item" effect="dark" :content="item.swName" placement="top"> -->
									{{ item.name }}
									<!-- </el-tooltip> -->
								</div>
							</div>
						</div>
					</div>
					<div class="label-box">
						<div class="label-box-left">
							<img src="@/assets/image/index/label_1.png" class="fenLei-icon" alt="" />
							<div class="label-title">知识标签</div>
						</div>
						<div class="label-box-right">
							<div class="label-content">
								<div class="label-span" v-for="(item, index) in tagsList" @click="onToCZ(item)">
									{{ item }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="knowledge f14" v-if="information && information.length">
				<div class="c333 fbold tCenter f26 bg">主题知识库</div>
				<div class="knowledge-box">
					<div class="knowledge-item1">
						<div
							v-for="(item, index) in information"
							:key="index"
							class="knowledge-item1-box"
							@click="indexType(index)"
							:class="{ knowledgeActive: knowledgeIndex == index }"
						>
							<img :src="imgUrl(index)" class="swiper-icon" alt="" />
							<div class="f16 left-box-text">{{ item.name }}</div>
						</div>
					</div>
					<div class="knowledge-item2">
						<div class="knowledge-overflow-right">
							<div class="knowledge-g" @click="onToKnowledeg">
								<img src="@/assets/image/index/more.png" class="swiper-icon" alt="" />
								<div class="f16 more-title">更多</div>
							</div>
						</div>
					</div>
				</div>
				<div>
					<div class="knowledge-button">
						<el-button
							v-for="(items, index) in classification[knowledgeIndex]"
							:key="items.id"
							@click="knowledgeBase(information[knowledgeIndex].id, items.id, knowledgeIndex)"
							class="button-color"
						>
							{{ items.name }}
						</el-button>
					</div>
				</div>
				<div class="knowledge-content">
					<div>
						<div class="swiper">
							<div class="swiper-box" v-if="lunbo && lunbo.length">
								<div v-for="(item, index) in lunbo" :key="item.id" class="box-item" @click="onTo(item)">
									<div class="swiper-box-1">{{ item.title }}</div>
									<div class="swiper-box-2">{{ time(item.createTime) }}</div>
									<div class="swiper-box-3">
										{{ item.remark }}
									</div>
								</div>
							</div>
							<div v-else class="empty">
								<el-empty description="暂无数据" />
							</div>
						</div>
						<div class="more" v-if="lunbo && lunbo.length">
							<el-button class="more-color" @click="lookMore">查看更多</el-button>
						</div>
						<div v-else style="height: 40px"></div>
					</div>
				</div>
			</div>
			<!-- 企业视频课程库	 -->
			<div class="shiPin" v-if="videoList && videoList.length">
				<div class="c333 fbold tCenter f26 bg">企业视频库</div>
				<div class="shiPin-item">
					<div class="shiPin-box">
						<div class="shiPin-left" @click="onToOne(videoList[0])">
							<div class="shiPin-left-img">
								<img v-if="videoList && videoList.length" :src="videoList[0].cover" alt="" />
							</div>
							<div class="shiPin-left-content" v-if="videoList && videoList.length">
								<div class="shiPin-left-content-title">{{ videoList[0].title }}</div>
								<div class="shiPin-left-content-bottom">
									<div class="shiPin-left-content-time">
										发布日期：{{ time(videoList[0].createTime) }}
									</div>
									<div class="shiPin-left-content-xiangqing">
										查看详情&nbsp;<img src="@/assets/image/index/xiangqing.png" alt="" />
									</div>
								</div>
							</div>
						</div>
						<div class="shiPin-right">
							<div class="shiPin-right-top">
								<div class="shiPin-right-top-gengduo" @click="onToShiPin">查看更多</div>
							</div>
							<div class="shiPin-b">
								<div v-for="(item, index) in videoList" :key="item.id">
									<div class="shiPin-boxs" v-if="index > 0" @click="onToGCXQ(item)">
										<div class="shiPin-boxs-img"><img :src="item.cover" alt="" /></div>
										<div class="shiPin-boxs-content">
											<div class="shiPin-boxs-content-title">{{ item.title }}</div>
											<div class="shiPin-boxs-content-time">
												发布日期：{{ time(item.createTime) }}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 新建蒙层 -->
		<el-dialog v-model="visible" :show-close="false" :close-on-click-modal="false" destroy-on-close>
			<template #header="{ close, titleId, titleClass }">
				<div class="dialog-header center btheme cfff">
					<img src="@/assets/image/zhuTi/xin.png" alt="" />
					<div class="flex f20 fbold">选择主题知识库</div>
					<el-icon class="pointer" size="20" color="#fff" @click="close">
						<Close />
					</el-icon>
				</div>
			</template>
			<div class="dialog-content">
				<el-tree
					:data="data"
					@node-expand="expandHand"
					@node-click="handleNodeClick"
					:props="{ value: 'id', label: 'name', children: 'children' }"
				/>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="visible = false">取消</el-button>
					<el-button type="primary" @click="onYes"> 确定 </el-button>
				</div>
			</template>
		</el-dialog>
		<!-- 底部 -->
		<v-myfoot isHome></v-myfoot>
	</div>
</template>

<script setup>
import { getAxios } from "/axios"
import SwiperCore, { Autoplay, Pagination, Navigation, A11y } from "swiper"
import "swiper/css"
import "swiper/css/pagination"
import "swiper/css/navigation"
import img01 from "@/assets/image/index/001.png"
import img02 from "@/assets/image/index/002.png"
import img03 from "@/assets/image/index/003.png"
import img04 from "@/assets/image/index/004.png"
import img05 from "@/assets/image/index/005.png"
import img06 from "@/assets/image/index/006.png"
import img07 from "@/assets/image/index/007.png"

SwiperCore.use([Pagination, A11y, Autoplay, Navigation])

//搜索内容
const searchText = ref("")
//热词
const hotWords = ref([])
//banner
const bannerList = ref([])
//知识分类
const knowledge = ref([])
//标签
const tagsList = ref([])
//
const information = ref([])
//智能推荐
const intelligenceAll = ref([])
//视频
const oneVideo = ref([])
const twoVideo = ref([])
const videoList = ref([])
const active = ref("1")
const activeIndex = ref(1)
//分类
const classification = ref([])
//作者
const userList = ref([])
//发布
const visible = ref(false)
const handName = ref("")
const data = ref([])
const swId = ref("")
//主题Id
const ids = ref("")
const swIndex = ref(4)
const lunbo = ref([])

//点击的知识分类
const knowledgeIndex = ref(0)

//分类列表
const classificationList = ref([])
async function list() {
	const classificationListS = []
	knowledge.value = await getAxios("/knowledge/kbCategory/findByUidAuthHot")
	hotWords.value = await getAxios("/knowledge/kbModelLabel/listHotWord")
	tagsList.value = await getAxios("/knowledge/kbBasicLabel/findByUidAuthLabel")
	userList.value = await getAxios("/kb/modelBaisc/authAll")
	const res = await getAxios("/knowledge/kbSubjectWarehouse/showList")

	intelligence()
	information.value = res
	information.value.splice(res.length - 1, 1)
	for (let i = 0; i < res.length; i++) {
		const resStr = await getAxios(`/knowledge/kbCategory/findBySwWid?swId=${res[i].id}`)
		classification.value.push(resStr)
		if (!resStr.length == "0") {
			const str = await getAxios(
				`/knowledge/kbBasicWarehouse/page?swId=${res[i].id}&sortField=pub_time&sortType=ASC&categoryIds=${resStr[0].id}`
			)
			classificationListS[i] = str.records
		} else {
			classificationListS[i] = []
		}
		classificationList.value = classificationListS
	}
	lunBos()
	const { KbCategoryList, kbSubjectWarehouse } = await getAxios(`/knowledge/kbCategory/findVideoCategory`)
	twoVideo.value = KbCategoryList
	videoList.value = await getAxios(`/knowledge/kbVideo/showListVideo`)
	oneVideo.value = kbSubjectWarehouse
	data.value = await getAxios("/knowledge/kbSubjectWarehouse/findByListToCategoryAdd")
}
list()
banNer()

//轮播
function lunBos() {
	if (classificationList.value[knowledgeIndex.value]) {
		lunbo.value = classificationList.value[knowledgeIndex.value].slice(0, 6)
	} else {
		lunbo.value = []
	}
}

async function banNer() {
	let bannerZ = []
	const banner = await getAxios(`/knowledge/kbBanner/list?status=1`)
	banner.forEach(item => {
		bannerZ.push(item.pcImage)
	})
	if (localStorage.getItem("bgc")) {
		const str = localStorage.getItem("bgc")
		bannerList.value = str.split(",")
	} else {
		bannerList.value = bannerZ
	}
	localStorage.setItem("bgc", bannerZ)
	if (bannerList.value.length == 2) {
		bannerList.value.forEach(item => {
			bannerList.value.push(item)
		})
	}
}

const router = useRouter()
const onToSearch = item => {
	router.push({ path: "/search", query: { tag: item.name, tags: "03", active: "01" } })
}
const knowledgeBase = async (id, ids, index) => {
	lunbo.value = []
	const { records } = await getAxios(
		`/knowledge/kbBasicWarehouse/page?swId=${id}&sortField=pub_time&sortType=ASC&categoryIds=${ids}`
	)
	const indexs = classification.value[index].findIndex(item => item.id == ids)
	classificationList.value[index] = records
	swIndex.value = 4
	lunBos()
}
//智能推荐
const intelligence = async () => {
	active.value = "1"
	intelligenceAll.value = []
	const res = await getAxios("/knowledge/kbBasicWarehouse/randBasicPage?size=16")
	dataLunBo(res)
}
//最新发布
const release = async () => {
	active.value = "2"
	intelligenceAll.value = []
	const res = await getAxios("/knowledge/kbBasicWarehouse/newBasicList?size=16")
	dataLunBo(res)
}
const browse = async () => {
	active.value = "3"
	intelligenceAll.value = []
	const res = await getAxios("/knowledge/kbBasicWarehouse/recentPreviewBasicList?size=16")
	dataLunBo(res)
}
function dataLunBo(res) {
	for (let i = 0; i < res.length; i += 4) {
		const sss = res.slice(i, i + 4)
		intelligenceAll.value.push(sss)
	}
}
const onFL = (item, it) => {
	if (it) {
		router.push(`/knowledgeList?name=${it.name}&id=${it.id}&names=${item.name}&swId=${item.id}`)
	} else {
		router.push(`/knowledgeList?name=${item.swName}&id=${item.swId}&names=${item.name}&swId=${item.id}`)
	}
}
const onToCZ = item => {
	if (Object.prototype.toString.call(item) === "[object Object]") {
		router.push(`/search?tag=${item.realName}&tags=01&active=1`)
	} else {
		router.push(`/search?tag=${item}&tags=04&active=1`)
	}
}
const searchAllCompany = () => {
	router.push(`/search?tag=${searchText.value}&tags=03&active=1`)
}

function time(item) {
	return item.substring(0, 10)
}

const onVideo = async (val, index) => {
	activeIndex.value = index + 2
	videoList.value = await getAxios(`/knowledge/kbVideo/showListVideo?swId=${val.id}`)
}
const onVideoAll = async () => {
	activeIndex.value = 1
	videoList.value = await getAxios(`/knowledge/kbVideo/showListVideo`)
}
const onToGCXQ = val => {
	router.push(`/videoDetails?id=${val.id}&swId=${val.swId}`)
}
const onTo = item => {
	router.push(`/knowledgeDetails?id=${item.id}&swId=${item.swId}`)
}
const shangChuan = () => {
	router.push(`/uploads`)
}

const releaseKnowledge = async () => {
	visible.value = true
}
const expandHand = data => {
	handName.value = data.name
}
const onYes = async () => {
	if (swId.value) {
		router.push(`/knowledgeCreation?swId=${swId.value}&id=${ids.value}&name=${handName.value}`)
	} else {
		ElMessage.error("请选择二级分类")
	}
}
//选择主题
const handleNodeClick = data => {
	swId.value = data.swId
	ids.value = data.id
}
//
const indexType = index => {
	knowledgeIndex.value = index
	lunbo.value = []
	lunBos()
}
const lookMore = () => {
	router.push(
		`/knowledgeList?name=${information.value[knowledgeIndex.value].name}&id=${
			information.value[knowledgeIndex.value].id
		}`
	)
}
const onToKnowledeg = () => {
	router.push(`/knowledge`)
}
const onToShiPin = () => {
	router.push(`/video?name=${oneVideo.value.name}&id=${oneVideo.value.id}`)
}
const onToOne = val => {
	router.push(`/videoDetails?id=${val.id}&swId=${val.swId}`)
}
const onColumn = val => {
	router.push(`/knowledgeList?name=${val.name}&id=${val.id}`)
}
const imgUrl = index => {
	let imgList = [img01, img02, img03, img04, img05, img06, img07]
	let it = Math.trunc(index / 6)
	if (index + 1 < 7) {
		return imgList[index]
	} else {
		return imgList[index * it - 6]
	}
}
</script>

<style lang="scss" scoped>
@import "/style/basis";
.index {
	.faBu {
		position: fixed;
		right: 5%;
		top: 24%;
		z-index: 100;
		filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2));
		img {
			cursor: pointer;
			width: 100px;
			height: 100px;

			@include maxWidth(1400) {
				width: 80px;
				height: 80px;
			}
			@include maxWidth(1024) {
				width: 70px;
				height: 70px;
			}
			@include maxWidth(768) {
				display: none;
			}
		}
	}

	:deep(.el-image__wrapper) {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shiPin {
		background: url(@/assets/image/index/index_4.png);
		// background-size: cover;
		min-height: 500px;
		// background-color: #f4f6fc;
		padding: 80px 0;
		.shiPin-item {
			display: flex;
			justify-content: center;
			margin-top: 40px;
			.shiPin-box {
				display: flex;
				width: 1000px;
				.shiPin-left {
					width: 50%;
					margin-right: 30px;
					border-radius: 10px;
					background-color: #fff;
					overflow: hidden;
					cursor: pointer;
					transition: all 0.5s;
					.shiPin-left-img {
						img {
							width: 100%;
							height: 300px;
							object-fit: cover;
						}
					}
					.shiPin-left-content {
						padding: 15px 30px;
						.shiPin-left-content-title {
							font-size: 16px;
							font-weight: 600;
							margin-bottom: 10px;
						}
						.shiPin-left-content-bottom {
							display: flex;
							justify-content: space-between;
							.shiPin-left-content-time {
								color: #999;
							}
							.shiPin-left-content-xiangqing {
								display: flex;
								justify-content: center;
								cursor: pointer;
								&:hover {
									color: #2971ff;
								}
							}
						}
						img {
							width: 20px;
							height: 20px;
						}
					}
					&:hover {
						box-shadow: 10px 8px 52px -9px #000;
					}
					@include maxWidth(800) {
						display: none;
					}
				}
				.shiPin-right {
					flex: 1;
					padding: 20px;
					background-color: #fff;
					border-radius: 10px;
					.shiPin-right-top {
						height: 30px;
						// background-color: pink;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						font-size: 16px;
						font-weight: 700;
						.shiPin-right-top-gengduo {
							font-size: 14px;
							color: #2971ff;
							cursor: pointer;
						}
					}
					.shiPin-b {
						height: 300px;
						overflow-y: scroll;
						@include maxWidth(800) {
							height: 500px;
						}
						.shiPin-boxs {
							display: flex;
							height: 80px;
							margin-bottom: 20px;
							cursor: pointer;
							transition: background-color 0.3s linear 0s;
							@include maxWidth(800) {
								height: 150px;
								overflow-y: inherit;
							}
							&:hover {
								background-color: #2971ff;
								color: #fff;
							}
							.shiPin-boxs-img {
								width: 30%;
								margin-right: 10px;
								border-radius: 5px;
								img {
									width: 100%;
									height: 100%;
									// border-radius: 10px;
								}
							}
							.shiPin-boxs-content {
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								.shiPin-boxs-content-title {
									font-size: 16px;
									font-weight: 600;
								}
								.shiPin-boxs-content-time {
									color: #999;
								}
							}
						}
					}
				}
			}
		}
	}

	.gongCheng {
		background: url(@/assets/image/index/gongCheng.png) no-repeat left -40px / cover;
		.gongCheng-main {
			width: 95%;
			margin: auto;
			max-width: 1000px;
			padding-top: 70px;
			padding-left: 17vw;
			padding-bottom: 40px;
			.f24 {
				font-weight: 700;
				margin-bottom: 10px;
			}
			@include maxWidth(1400) {
				max-width: 900px;
			}
			@include maxWidth(800) {
				padding-left: 0;
				padding-top: 40px;
			}
			@include maxWidth() {
				padding-top: px2vw(40);
			}
		}
		.mySwiper {
			padding-top: 15px;
		}
		:deep(.swiper-button-prev) {
			left: 0;
			top: 215px;
		}

		:deep(.swiper-button-prev::after) {
			margin-top: 10px;
			content: "";
			display: block;
			width: 40px;
			height: 40px;
			background-image: url("@/assets/image/index/zuo.png");
			background-size: 100% 100%;
		}

		:deep(.swiper-button-next) {
			left: 50px;
			top: 215px;
			// bottom: 10px;
		}

		:deep(.swiper-button-next::after) {
			margin-top: 10px;
			content: "";
			display: block;
			width: 40px;
			height: 40px;
			background-image: url("@/assets/image/index/you.png");
			background-size: 100% 100%;
		}

		:deep(.swiper-slide) {
			padding-bottom: 50px;
		}

		.tag-box {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 10px;
		}

		.bfff {
			background: #ffffff;
			box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
			padding: 30px;
			width: 95%;
			margin: auto;
			border-radius: 3px;
			transition: all 0.25s;

			.ctheme {
				margin: 20px 10px 20px 0;
			}

			&:hover {
				background: #2971ff !important;
				color: #fff;
				.ctheme,
				.c333,
				.c52 {
					color: #fff !important;
				}
			}
		}

		.subtitle {
			// padding-left: 20px;
			/* 1.溢出隐藏 */
			overflow: hidden;
			/* 2.用省略号来代替超出文本 */
			text-overflow: ellipsis;
			/* 3.设置盒子属性为-webkit-box  必须的 */
			display: -webkit-box;
			/* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
			-webkit-line-clamp: 2;
			/* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
			word-break: break-all;
			/* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
			-webkit-box-orient: vertical;
			// padding-top: 15px;
			// padding-bottom: 15px;
		}
	}
	.knowledge {
		background: url(@/assets/image/index/index_3.png) no-repeat center bottom;
		background-size: cover;
		padding: 80px 0;
		.bg {
			color: #fff;
		}
		.knowledge-box {
			display: flex;
			justify-content: center;
			margin-top: 30px;
			.knowledge-item1 {
				width: 900px;
				display: flex;
				overflow: scroll;
				display: -webkit-box;
				.knowledge-item1-box {
					cursor: pointer;
					width: 10%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 45px;
					padding-bottom: 20px;
					.swiper-icon {
						width: 75px;
						height: 75px;
					}
					.left-box-text {
						width: 100px;
						text-align: center;
						color: #fff;
					}
					&:hover {
						border-bottom: 3px solid #fff;
					}
				}
				.knowledgeActive {
					border-radius: 2px;
					border-bottom: 3px solid #fff;
				}
			}
			.knowledge-item2 {
				width: 100px;
				height: 50px;
				@include maxWidth(700) {
					display: none;
				}
				.knowledge-overflow-right {
					flex: 1;
					.knowledge-g {
						display: flex;
						flex-direction: column;
						// justify-content: center;
						align-items: center;
						margin-top: -8px;
						cursor: pointer;
						.swiper-icon {
							width: 75px;
							height: 75px;
						}
						.more-title {
							color: #fff;
						}
					}
				}
			}
		}
		.knowledge-button {
			display: flex;
			justify-content: center;
			margin: 40px 0 20px 0;
			flex-wrap: wrap;
			.button-color {
				color: #2971ff;
				margin-bottom: 10px;
				&:hover {
					color: #fff;
					background-color: #409eff;
				}
			}
			.buttonActive {
				background-color: #0052d9;
				color: #fff;
			}
		}
		.knowledge-content {
			display: flex;
			justify-content: center;
			.swiper {
				min-height: 350px;
				.swiper-box {
					width: 1000px;
					display: flex;
					flex-wrap: wrap;
					@include maxWidth(1000) {
						width: 100vw;
					}
					.box-item {
						width: 32%;
						height: 150px;
						margin-right: 10px;
						margin-bottom: 10px;
						background-color: #fff;
						border-radius: 10px;
						padding: 15px;
						cursor: pointer;
						transition: background-color 0.3s linear 0s;
						@include maxWidth(1000) {
							width: 95%;
							margin: 5px 2vw;
						}
						&:hover {
							background-color: #409eff;
							color: #fff;
						}
						.swiper-box-1 {
							font-size: 16px;
							font-weight: 600;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							@include maxWidth(1000) {
								width: 80%;
							}
						}
						.swiper-box-3 {
							/* 1.溢出隐藏 */
							overflow: hidden;
							/* 2.用省略号来代替超出文本 */
							text-overflow: ellipsis;
							/* 3.设置盒子属性为-webkit-box  必须的 */
							display: -webkit-box;
							/* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
							-webkit-line-clamp: 2;
							/* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
							word-break: break-all;
							/* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
							-webkit-box-orient: vertical;
						}
					}
				}
				.empty {
					min-height: 350px;
					border-radius: 5px;
					:deep(.el-empty__description) {
						p {
							color: #fff;
						}
					}
				}
			}
			.more {
				display: flex;
				justify-content: center;
				.more-color {
					color: #2971ff;
					width: 150px;
					height: 40px;
					&:hover {
						color: #fff;
						background-color: #409eff;
					}
				}
			}
		}
	}

	.fen-biao-box {
		padding: 80px 0;
		background: url(@/assets/image/index/biao.png) no-repeat center bottom;
		background-size: cover;
		// max-width: 1000px;
		.label {
			display: flex;
			justify-content: center;
			margin-top: 30px;
			@include maxWidth(900) {
				flex-direction: column;
				align-items: center;
			}
			.label-box {
				width: 500px;
				// height: 300px;
				max-height: 300px;
				background-color: #fff;
				border-radius: 5px;
				// display: flex;
				padding: 30px 40px;
				box-shadow: 0 0 0 1px #ddd;
				@include maxWidth(900) {
					display: flex;
					width: 90%;
					margin: 0 20px;
					height: 150px;
				}
				@include maxWidth(700) {
					padding: 10px 20px;
					align-items: center;
				}
				@include maxWidth(600) {
					position: relative;
					height: 200px;
				}
				&:nth-of-type(2) {
					margin: 0 20px;
					@include maxWidth(900) {
						margin: 20px 20px;
					}
				}
				.label-box-left {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 20px;

					@include maxWidth(600) {
						position: absolute;
						top: 20px;
						left: 10;
					}
					.label-title {
						width: 70px;
						font-size: 17px;
						font-weight: 600;
					}
					@include maxWidth(900) {
						width: 15%;
					}
				}
				.label-box-right {
					flex: 1;
					.label-content {
						margin-top: 10px;
						display: flex;
						flex-wrap: wrap;
						.label-span {
							margin-right: 10px;
							margin-bottom: 10px;
							background-color: #f4f6f8;
							padding: 5px 10px;
							border-radius: 5px;
							cursor: pointer;
							// max-width: 100px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							@include maxWidth(1400) {
								margin-bottom: 5px;
							}
							@include maxWidth(900) {
								margin-bottom: 20px;
							}
							@include maxWidth(700) {
								margin-bottom: 10px;
							}
							@include maxWidth(600) {
								margin-bottom: 5px;
							}
							&:hover {
								color: #2972fa;
								background-color: #f0f8ff;
							}
						}
					}
				}
			}
		}
		.fen {
			span {
				padding: 0 20px 20px 0;
				&:hover {
					color: #000;
				}
			}
		}

		.biao {
			span {
				padding: 0 10px;
				line-height: 28px;
				border: 1px solid #d3d3d3;
				border-radius: 20px;
				margin: 0 10px 12px 0;
			}
		}

		.hr {
			width: 2px;
			height: 200px;
			background: #eeeeee;
			margin: 0 50px;
		}

		.title {
			padding-bottom: 30px;
		}

		.fenLei-icon {
			width: 65px;
			height: auto;
			margin-right: 10px;
			@include maxWidth(1400) {
				width: 50px;
			}
			@include maxWidth(600) {
				display: none;
			}
		}

		.fen-biao {
			overflow: hidden;
			// width: 23.68rem;
			background: linear-gradient(180deg, #effeff, #ffffff);
			border-radius: 20px;
			padding: 20px 50px;
			margin: auto;
			max-width: 1100px;
			width: 95%;
			box-shadow: 3px 3px 5px rgba(#000, 0.1);
			@media (max-width: 880px) {
				display: block;
				.hr {
					display: none;
				}
				> .flex {
					border-bottom: 1px solid #f5f5f5;
					margin-bottom: 30px;
					padding-bottom: 20px;
					&:last-child {
						margin-bottom: 0;
						border: 0;
					}
				}
			}
			@media (max-width: 768px) {
				padding: 20px 5vw;
				> .flex {
					margin-bottom: 3vw;
					padding-bottom: 2vw;
				}
			}
		}
	}

	.souSuo {
		background: no-repeat center bottom;
		background-size: cover;
		padding-top: 90px;
		padding-bottom: 100px;
		padding-right: 60px;
		// transition: all 0.5s;
		position: relative;
		@include maxWidth(768) {
			padding-right: 0px;
		}
		.tCenter {
			// text-shadow: #000 4px 4px 4px;
			letter-spacing: 2px;
		}
		.bannerCss {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: -10;
			:deep(.el-carousel__container) {
				height: 250px;
			}
			:deep(.el-carousel__indicators--horizontal) {
				display: none;
			}
			.banner-img {
				width: 100%;
				height: 100%;
				// aspect-ratio: 1 / 1;
				// height: initial;
			}
			:deep(.el-carousel__container) {
				height: 350px;
			}
		}

		.input-box {
			height: 50px;
			background: #ffffff;
			border-radius: 10px;
			padding: 0 20px 0 20px;
			box-shadow: 3px 3px 2px 0 rgba(#000, 0.2);
			margin-right: 50px;
			@include maxWidth(768) {
				height: 40px;
			}
			input {
				height: 100%;
			}

			.ctheme {
				border-left: 1px solid #e5e5e5;
				padding-left: 20px;
				font-weight: 700;
				font-size: 15px;
			}

			.souSuo-icon {
				width: 18px;
				height: auto;
				margin-right: 20px;
			}
		}

		.input-main {
			width: 95%;
			max-width: 1000px;
			margin: auto;
			margin-top: 30px;
			margin-bottom: 20px;

			.hr {
				width: 3px;
				height: 46px;
				background: #ffffff;
				opacity: 0.3;
				margin: 0 50px;
				@include maxWidth(768) {
					margin: 0 30px;
				}
				@include maxWidth(500) {
					margin: 0 10px;
				}
			}
			.shangChuan {
				width: 110px;
				height: 50px;
				background: #ffffff;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				// box-shadow: 0 0 5px #ddd;
				@include maxWidth(768) {
					width: 100px;
					height: 40px;
				}
				.shangChuan-icon {
					width: 30px;
					margin-right: 10px;
				}
			}
		}

		.reCi {
			width: 95%;
			max-width: 900px;
			margin: auto;
			.nowrap {
				overflow: scroll;
			}
			span {
				margin-right: 20px;
				cursor: pointer;
				text-shadow: #666 0px 0px 4px;
				&:hover {
					font-weight: bold;
				}
			}
			@include maxWidth(768) {
				.re-wrap {
					flex-wrap: wrap;
				}
			}
		}

		.huo {
			width: 20px;
			margin-right: 10px;
		}
	}
	// .fs26 {
	// 	font-size: 26px;
	// }
}
.el-carousel__item h3 {
	color: #475669;
	opacity: 0.75;
	line-height: 200px;
	margin: 0;
	text-align: center;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
	background-color: #d3dce6;
}
// .liulan-item {
// 	display: flex;
// 	align-items: center;
// 	justify-content: flex-end;
// }
input::-webkit-input-placeholder {
	font-size: 12px;
}
.fenLei-img {
	padding: 5px;
	background-color: rgba(41, 114, 250, 0.2);
	border-radius: 20px;
}

@media (max-width: 1600px) {
	:deep(.swiper-button-prev::after) {
		width: 30px !important;
		height: 30px !important;
	}
	:deep(.swiper-button-next::after) {
		width: 30px !important;
		height: 30px !important;
	}
}
:deep(.swiper-pagination) {
	bottom: -5px;
}
</style>
